<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>demo</title>
<!--  <script src="http://core.pc.lietou-static.com/js/common/jquery-1.7.1.min.js"></script>
-->
  <link rel="stylesheet" href="http://core.pc.lietou-static.com/css/port/lpt/common.css">
<style>
.list{height:50px; width: 800px;margin: 50px auto 0;}
.list li{float: left;height:50px;width:100px; margin-right:20px;}
.list li p{height:50px; background:white;}

.list li:hover,
.list li.active{border:1px solid red;margin:0 19px 0 -1px;position:relative;}
.content{width:1000px;margin:0 auto; height: 300px;border:1px solid black;}
.content div{background:white; height:50px;position: relative;padding-top:1px;}


</style>
</head>
<body>

<div>
<ul class="list list1">
  <li><p></p></li>
  <li><p></p></li>
  <li class="active"><p></p></li>
  <li><p></p></li>
  <li><p></p></li>
  <li><p></p></li>
</ul>
</div>

<div>
<ul class="list">
  <li><p></p></li>
  <li><p></p></li>
  <li class="active"><p></p></li>
  <li><p></p></li>
  <li><p></p></li>
  <li><p></p></li>
</ul>
</div>
<div class="content">
  <div></div>
</div>

</body>
</html>